<template>
  <div>
    <div class="page-about">

    <div class="short-href">
      <a v-for="(info, index) of infos" :key="index" :href="info.link" :class="{changed: theNumber === index}" @click="changeClass(index, $event)">
        {{info.name}}
      </a>
    </div>
    <div class="fixed-top short-href" v-show="scrollSpecifiedPosition">
      <a v-for="(info, index) of infos" :key="index" :href="info.link" :class="{changed: theNumber === index}" @click="changeClass(index, $event)">
        {{info.name}}
      </a>
    </div>
    <div class="all-container">
      <div id="about-container" class="one-container" data-value="icons[0].id">
        <div class="container-header">
          <img src="../assets/picture/finewest.png" width="40" height="40">
          <h1>关于我们</h1>
        </div>
        <div class="container-main">
          <h2>公司概况</h2>
          <div class="content-info company-info">
            <div class="guanyu-pic"><img src="../assets/picture/guanyu.png" width="100%" height="auto"></div>
            <p>优自西方于2014年由一群留学法国葡萄酒专业团队组建，是国内领先的国际精品酒饮B2B供应链平台。我们定位为精品酒饮原产地供应资源的百度，已与超过{{originNum}}家酒庄/酒商合作，为买家提供{{wineNum}}SKU精品酒供应数据，通过供应数据服务与产品咨询服务帮助国内酒商在国际上采购优质、低价、丰富、稀缺的精品酒饮，并提供高效的贸易进口、国际物流、金融、清关等中间服务，实现国内酒商与国际供应商直接进口，在新一轮消费升级竞争中提供有力的供应链支撑。</p>
            <br>
            <p>目前，优自西方分别在上海、成都、香港建立仓库，提供法国全产区精品葡萄酒原产地小额进口与部分保税仓现货交易服务，可提供一般贸易、跨境电商、自由贸易多种进口通关途径，满足国内买家与国际酒庄的多元交易。</p>
            <br>
            <p>同时，优自西方正通过供应链平台促使酒庄便捷地链接中国广泛的公司买家，并协助酒庄管理在中国市场的销售、渠道、市场服务与品牌建设。</p>
            <br>
            <p>2016与2017年，优自西方为国内数百家葡萄酒公司进口超过1500款法国精品酒，为合作伙伴打开在国际上采购优质、低价、丰富、稀缺酒饮的供应链通道，并已在新一轮消费升级商业竞争中占领先机。</p>
            <br>
            <p>未来，优自西方供应链平台将涵盖全球精品葡萄酒与烈酒，深入整合上游优质、稀缺、丰富的供应资源，并通过保税仓服务、多渠道通关、供应链金融、国际零担物流等，将产业供应链的信息、商流、资金流、物流汇聚成有生态能力的供应链服务平台。</p>
          </div>
        </div>
      </div>
      <div id="business-container" class="one-container" data-value="icons[1].id">
        <div class="container-header jy-progress">
          <img src="../assets/picture/progress-business.png" width="40" height="40">
          <h1>交易流程</h1>
        </div>
        <div class="container-main">
          <h2>原产地进口流程</h2>
          <div class="progress-detail">
            <img src="../assets/picture/now-goods.png">
          </div>
          <h2>保税仓现货交易流程</h2>
          <div class="progress-detail">
            <img src="../assets/picture/origin-import.png">
          </div>
          <h2>服务优势</h2>
          <div class="content-info">
            <p>产品：{{wineNum}}法国原产地精品酒数据（库存与报价），覆盖全法</p>
            <p>价格：买家与酒庄直接交易，保证低价</p>
            <p>服务： 会员制服务，提供高效国际贸易中间服务，如：采购、国际物流、清关等</p>
            <p>技术： 自有线上平台，通过算法达成大数据与个性需求匹配</p>
            <p>团队： 大型酒类外企工作经历+法国海归团队</p>
            <p>效率： 每10天从法国发货，分发上海/香港</p>
          </div>
        </div>
      </div>
      <div id="company-container" class="one-container" data-value="icons[2].id">
        <div class="container-header">
          <img src="../assets/picture/company.png" width="40" height="40">
          <h1>商业合作</h1>
        </div>
        <div class="container-main">
          <h2>供应商合作</h2>
          <div class="content-info">
            <p>如果您是酒庄或在国内保税仓有现货的酒商，请联系我们。经过公司产品团队严格审核后，将为您的产品在优自西方平台上线，让更多客户有机会买到贵公司的好酒。<br>tel:028-85980909 王先生<br>eric.wang@finewest.cn</p>
          </div>
          <h2>物流合作</h2>
          <div class="content-info">
            <p>我们一直在优化国际物流（海运、空运）与国内物流（整包与干线服务），如果您是懂精品葡萄酒的物流企业，请联系我们。<br>tel:028-85980909 李小姐<br>jojo.li@finewest.cn</p>
          </div>
          <h2>供应链金融合作</h2>
          <div class="content-info">
            <p>一般贸易信用证已经很普遍了，我们要找的是进口小额金融B2B服务。<br>tel:028-85980909 李小姐<br>jojo.li@finewest.cn</p>
          </div>
        </div>
      </div>
      <div id="payment-container" class="one-container" data-value="icons[3].id">
        <div class="container-header">
          <img src="../assets/picture/mode-payment.png" width="40" height="40">
          <h1>支付方式</h1>
        </div>
        <div class="container-main">
          <h2>在线支付</h2>
          <div class="mode-payment">
            <div class="mode-wechar mode">
              <img src="../assets/picture/finewest-wechar.png" width="40" height="40">
              <p>微信支付</p>
            </div>
            <div class="mode-zfb mode">
              <img src="../assets/picture/finewest-pay.png" width="40" height="40">
              <p>支付宝支付</p>
            </div>
          </div>
          <h2>线下支付</h2>
          <div class="xx-payment">
            <div class="union">
              <img src="../assets/picture/unionpay.png" width="45" height="45">
              <p>对公账户支付</p>
            </div>
            <p>请汇款至优自西方对公账户<br>帐号：5464 5841 3484 8765 1213<br>开户行：招商银行成都锦官城支行<br>开户名：成都优自西方国际贸易有限公司</p>
          </div>
        </div>
      </div>
    </div>
    <myfooter></myfooter>
    </div>
  </div>
</template>

<script>
  import myheader from '@/components/header'
  import myfooter from '@/components/footer'
  export default{
    name: 'about-finewest',
    components: {
      myheader,
      myfooter
    },
    data () {
      return {
        theNumber: 0,
        infos: [
          {name: '关于我们', link: '#about-container', id: 0},
          {name: '交易流程', link: '#business-container', id: 1},
          {name: '商务合作', link: '#company-container', id: 2},
          {name: '支付方式', link: '#payment-container', id: 3}
        ],
        wineNum: 0,
        originNum: 0,
        dealNum: 0,
        scrollSpecifiedPosition: false,
        animate: false // 判断是否在滚动
      }
    },
    mounted () {
      this.number()
      window.addEventListener('scroll', this.companyDetailScroll, false)
    },
    methods: {
      companyDetailScroll () {
        var d = new Date().getTime()
        var that = this
        setTimeout(function () {
          var f = new Date().getTime()
          console.log(f - d)
          var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
          if (scrollTop > 106) {
            that.scrollSpecifiedPosition = true
          } else {
            that.scrollSpecifiedPosition = false
          }
          console.log(scrollTop)
          for (var i = 0; i < that.infos.length; i++) {
            if (scrollTop >= (document.querySelector(that.infos[i].link).offsetTop - 55)) {
              that.theNumber = that.infos[i].id
            }
          }
        }, 16)
      },
      changeClass (index, event) {
        if (this.animate === true) {
          return
        }
        event = window.event || event
        event.preventDefault()
        var that = this
        // this.$utils.scrollPageY(this.infos[index].link)
        var allHeight = document.body.scrollHeight || document.documentElement.scrollHeight
        var clientHeight = document.body.clientHeight > document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight
        var divScrollTop = document.querySelector(this.infos[index].link).offsetTop - 55
        var timer = null
        clearInterval(timer)
        timer = setInterval(function () {
          that.animate = true
          //  滚动条位置 top
          var bodyScrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
          //  div 距离body顶部高度
          var nowTop = divScrollTop - bodyScrollTop
          var speed = nowTop / 8
          // console.log(speed + '/' + bodyScrollTop + '/' + clientHeight + '/' + parseInt(bodyScrollTop + clientHeight) + '/' + allHeight)
          speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed)
          if (nowTop === 0 || (parseInt(speed) > 0 && parseInt(bodyScrollTop + clientHeight) === parseInt(allHeight))) {
            clearInterval(timer)
            that.animate = false
          } else {
            document.documentElement.scrollTop = bodyScrollTop + speed
            document.body.scrollTop = bodyScrollTop + speed
          }
        }, 5)
      },
      number () {
        this.$http({
          method: 'get',
          url: 'http://www.finewest.cn/m/indexData.htm',
          headers: {},
          emulateJSON: true
        }).then(function (response) {
          response = JSON.parse(response.bodyText)
          this.wineNum = response.countGoods
          this.originNum = response.countSeller
          this.dealNum = response.countOrder
        }, function (response) {
          console.log(response)
          console.log('获取数据失败')
        })
      }
    },
    destroyed () {
      window.removeEventListener('scroll', this.companyDetailScroll, false)
    }
  }
</script>

<style scope lang="scss">
  .page-about {
    padding-bottom: 69px;
  }
  .short-href{
    height: 55px;
    width: 100%;
    overflow: hidden;
    a{
      width: 25%;
      height: 100%;
      color: #ffffff;
      font-size: 16px;
      float: left;
      text-align: center;
      line-height: 55px;
      background: #e92d46;
    }
    a.changed{
      background: #fe4b63;
    }
  }
  .short-href.fixed-top {
    position: fixed;
    top: 0;
    z-index: 99;
  }
  .one-container{
    .container-header{
      margin: 0 auto;
      border-bottom: 4px solid #e7e7eb;
      border-top: 1px solid #e7e7e7;
      img{
        display: table;
        margin: 17px auto 6px;
      }
      h1{
        font-size: 18px;
        color: #000000;
        line-height: 18px;
        margin-bottom: 12px;
        text-align: center;
      }
    }
    .container-main{
      h2{
        font-size: 14px;
        color: #000000;
        height: 37px;
        line-height: 37px;
        text-indent: 25px;
        position: relative;
        border-top: 1px solid #e7e7e7;
        border-bottom: 1px solid #e7e7e7;
        &:after{
          position: absolute;
          content: '';
          display: block;
          width: 1px;
          height: 13px;
          background: #e92d46;
          top: 12px;
          left: 12px;
        }
        span{
          display: none;
        }
      }
      .content-info.company-info{
        .guanyu-pic{
          margin: -5px -12px 20px;
          img{
            display: inherit;
          }
        }
        p{
          text-indent: 24px;
        }
      }
      .content-info{
        margin: 16px 12px;
        p{
          font-size: 12px;
          color: #444444;
          line-height: 16px;
          word-break:break-all;
        }
      }
      .progress-detail{
        img{
          width: calc(100% - 24px);
          display: table;
          margin: 16px auto;
        }
      }
      .mode-payment{
        /*display: -webkit-box;
        display: flex;
        display: -webkit-flex;
        -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
        justify-content: space-evenly;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;*/
        display: table;
        margin: 20px auto;
        overflow: hidden;
        .mode{
          margin: 0 43px;
          float: left;
          img{
            display: table;
            margin: 0 auto;
          }
          p{
            font-size: 12px;
            color: #444444;
            margin-top: 7px;
            text-align: center;
          }
        }
      }
      .xx-payment{
        .union{
          img{
            display: table;
            margin: 0 auto;
          }
          p{
            margin: 6px 0 16px;
          }
        }
        p{
          font-size: 12px;
          color: #444444;
          line-height: 18px;
          text-align: center;
        }
      }
    }
  }
</style>
